<template>
    <div class="page-container index-container">
        <!-- <div class="m-mainBox">
        </div> -->
        <div class="m-GenBox page-main">
            <div class="searchBox clearfix">
                <div class="condition">
                    <el-select v-model="value3" class="genSelect item mr20 w150" placeholder="请选择维度" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value1" class="genSelect item mr20 w150" placeholder="请选择年度" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value2" class="genSelect item mr20 w150" placeholder="请选择年级" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value4" class="genSelect item mr20 w150" placeholder="请选择学校" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value5" class="genSelect item mr20 w150" placeholder="请选择班级" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options5"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-button type="primary" >查询</el-button>
                </div>
            </div>

            <div class="page-tit pdt50">区级学校发展</div>
            <div class="areaStatistics clearfix">
                <div class="statisticsBox gen-shadow">
                    <div class="info">
                        <div class="tit">综合指数</div>
                        <div class="num">4.56</div>
                    </div>
                    <div class="imgbox box-color-1"></div>
                </div>
                <div class="statisticsBox gen-shadow">
                    <div class="info">
                        <div class="tit">均衡系数</div>
                        <div class="num">0.15</div>
                    </div>
                    <div class="imgbox box-color-2"></div>
                </div>
            </div>

            <div class="gen-row pdt20 clearfix">
                
                <div class="l-genBox gen-shadow u-flex_col">
                    <div class="tit">评价内容表</div>
                    <div class="u-flex ofh">
                        <el-table :data="tableData_1||tableData" height="438px" style="width: 100%" :header-cell-style="{background:'#f4f5f9',fontSize:'16px',color:'#747e93',textAlign:'center',height:'50px'}" :cell-style="{textAlign:'center',height:'58px',fontSize:'16px',color:'#333333'}">
                            <el-table-column label="评价内容">
                                <template slot-scope="scope">
                                    <span class="red">{{scope.row.name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="num" label="指数">
                            </el-table-column>
                            <el-table-column prop="key" label="均衡系数">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="r-genBox gen-shadow u-flex_col">
                    <div class="tit">小学-学校创新发展</div>
                    <div class="u-flex" style="padding:0 40px 20px 10px;">
                        <u-barEchart
                        :keyId="'cxfz1'"  yAxisName="评价指数" xAxisName="学校"
                        :legend="legendList1" :list="list1" :markVal='3' hasDiff>
                        </u-barEchart>
                    </div>
                </div>
                
            </div>

            <div class="gen-row pdt20 clearfix">
                
                <div class="l-genBox gen-shadow u-flex_col">
                    <div class="tit">维度表</div>
                    <div class="u-flex ofh">
                        <el-table :data="tableData_2||tableData2" height="438px" style="width: 100%" :header-cell-style="{background:'#f4f5f9',fontSize:'16px',color:'#747e93',textAlign:'center',height:'50px'}" :cell-style="{textAlign:'center',height:'58px',fontSize:'16px',color:'#333333'}">
                            <el-table-column label="评价内容"  :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <span class="red">{{scope.row.name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="num" label="指数" width="180">
                            </el-table-column>
                            <el-table-column prop="key" label="均衡系数">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="r-genBox gen-shadow u-flex_col">
                    <div class="tit">初中-学校创新发展</div>
                    <div class="u-flex" style="padding:0 40px 20px 10px;">
                        <u-barEchart
                        :keyId="'cxfz2'"  yAxisName="评价指数" xAxisName="学校" 
                        :legend="legendList2" :list="list2" :markVal='3.2' hasDiff>
                        </u-barEchart>
                    </div>
                </div>
                
            </div>



        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            active:0,
            tableData_1:null,
            tableData_2:null,
            tableData: [{
                name: '学生特质',
                num: '4.12',
                key: '0.16'
            },{
                name: '教师行为',
                num: '2.63',
                key: '0.3'
            },{
                name: '领导风格',
                num: '5.00',
                key: '0.22'
            },{
                name: '学校环境',
                num: '3.16',
                key: '0.09'
            },{
                name: '师德修养',
                num: '4.21',
                key: '0.28'
            },{
                name: '学生特质',
                num: '4.41',
                key: '0.11'
            },{
                name: '学生特质',
                num: '4.41',
                key: '0.13'
            },{
                name: '学生特质',
                num: '4.41',
                key: '0.25'
            }],
            tableData2: [{
                name: '创新素养',
                num: '4.12',
                key: '0.25'
            },{
                name: '创造性教学',
                num: '2.63',
                key: '0.14'
            },{
                name: '创造力培养',
                num: '5.00',
                key: '0.21'
            },{
                name: '创造性特征',
                num: '3.16',
                key: '0.13'
            },{
                name: '创造性行为',
                num: '4.21',
                key: '0.18'
            }],
            value1:'2020',
            options1:[{label:'2018年度',value:'2018'},{label:'2019年度',value:'2019'},{label:'2020年度',value:'2020'}],
            value2:'',
            options2:[{label:'一年级',value:'1'},{label:'二年级',value:'2'},{label:'三年级',value:'3'},{label:'四年级',value:'4'},{label:'五年级',value:'5'},{label:'六年级',value:'6'},{label:'初一',value:'7'},{label:'初二',value:'8'},{label:'初三',value:'9'},],
            value3:'学校创新发展',
            // options3:[{label:'学生特质',value:'学生特质'},{label:'教师行为',value:'教师行为'},{label:'领导风格',value:'领导风格'},{label:'学校环境',value:'学校环境'},{label:'师德修养',value:'师德修养'}],
            options3:[{label:'学校创新发展',value:'学校创新发展'},{label:'教师专业能力',value:'教师专业能力'},{label:'学生综合素质发展',value:'学生综合素质发展'}],
            value4:'',
            options4:[{label:'龙峰国际小学',value:'龙峰国际小学'},{label:'义蓬第三小学',value:'义蓬第三小学'},{label:'义蓬第四小学',value:'义蓬第四小学'},{label:'义蓬第一小学',value:'义蓬第一小学'},{label:'宏图小学',value:'宏图小学'},{label:'新围小学',value:'新围小学'}],
            value5:'',
            options5:[{label:'一(1)班',value:'一(1)班'},{label:'一(2)班',value:'一(2)班'},{label:'二(1)班',value:'二(2)班'},{label:'三(1)班',value:'三(1)班'},{label:'四(1)班',value:'四(1)班'}],
            legendList1:[
                {name:'钱塘新区',key:1,color:'#4ca0ff',itemcolor:['#4ba0ff','#0179ff'],isSign: true},
                {name:'正常',min:3,max:5,color:'#00cd86',itemcolor:['#2dd681','#23c5a2']},
                {name:'需关注',min:0,max:3,color:'#ff7b12',itemcolor:['#ff9600','#ff7b12'],isSign: true},
            ],
            list1:[
                {name:"钱塘新区",key:1,value:[3.15]},
                {name:"江湾小学",value:[4.21]},
                {name:"金沙学校",value:[2.52]},
                {name:"景苑小学",value:[4.23]},
                {name:"文博学校",value:[3.24]},
                {name:"文海实验学校",value:[3.55]},
                {name:"下沙第二小学",value:[4.12]},
                {name:"下沙第一小学",value:[4.63]},

                {name:"新阳光学校",value:[2.63]},
                {name:"学林街小学",value:[3.35]},
                {name:"明珠小学",value:[3.87]},
                {name:"河庄小学",value:[4.19]},
                {name:"宏图小学",value:[4.62]},
                {name:"前进第一小学",value:[1.64]},
                {name:"新湾小学",value:[4.06]},
                {name:"启慧小学",value:[3.28]},
            ],
            legendList2:[
                {name:'钱塘新区',key:1,color:'#4ca0ff',itemcolor:['#4ba0ff','#0179ff',],isSign: true},
                {name:'正常',min:3.2,max:5,color:'#00cd86',itemcolor:['#2dd681','#23c5a2']},
                {name:'需关注',min:0,max:3.2,color:'#ff7b12',itemcolor:['#ff9600','#ff7b12'],isSign: true},
            ],
            list2:[
                {name:"钱塘新区",key:1,value:[3.25]},
                {name:"启成中学",value:[3.42]},
                {name:"启源中学",value:[4.54]},
                {name:"前进中学",value:[3.26]},
                {name:"义蓬中学",value:[4.28]},
                {name:"新围中学",value:[4.51]},
                {name:"新湾镇中学",value:[3.15]},
                {name:"临江一中",value:[3.66]},

                {name:"启慧初中",value:[3.69]},
                {name:"下沙中学",value:[2.32]},
                {name:"学正中学",value:[3.84]},
                {name:"养正中学",value:[3.56]},
                {name:"东南中学",value:[3.68]},
                {name:"景苑中学",value:[4.61]},
                {name:"新阳光学校",value:[3.62]},
                {name:"文博学校",value:[4.33]},
            ],
        }
    },
    mounted(){
        this.selectChange();
    },
    methods:{
        selectChange(){
            if(this.value3 == '学校创新发展'){
                this.tableData_1 = [{name: '学生特质',num: '4.12',
                key: '0.25'},{name: '教师行为',num: '2.12',
                key: '0.15'},{name: '领导风格',num: '3.12',
                key: '0.2'},{name: '学校环境',num: '4.12',
                key: '0.1'}];
                this.tableData_2 = [{name: '创新素养',num: '3.52',key: '0.12'},{name: '创造性教学',num: '4.61',key: '0.22'},{name: '创造力培养',num: '4.61',key: '0.18'},{name: '创造性特征',num: '3.53',key: '0.27'},{name: '创造性行为',num: '3.53',key: '0.21'},{name: '物理环境',num: '4.41',key: '0.07'},{name: '人文环境',num: '4.41',key: '0.19'}]
            }else if(this.value3 == '教师专业能力'){
                this.tableData_1 = [{name: '师德修养',num: '3.36',
                key: this.getNum()},{name: '教学能力',num: '3.15',
                key: this.getNum()},{name: '教育能力',num: '4.49',
                key: this.getNum()},{name: '教研能力',num: '2.57',
                key: this.getNum()},{name: '创新行为',num: '3.52',
                key: this.getNum()}]
                this.tableData_2 = [
                    {name: '爱国守法',num: '2.17',key: this.getNum()},
                    {name: '爱岗敬业',num: '3.14',key: this.getNum()},
                    {name: '关爱学生',num: '2.88',key: this.getNum()},
                    {name: '教书育人',num: '4.45',key: this.getNum()},
                    {name: '为人师表',num: '4.16',key: this.getNum()},
                    {name: '终身学习',num: '3.89',key: this.getNum()},
                    {name: '教学过程和方法',num: '3.75',key: this.getNum()},
                    {name: '教师的基本素质',num: '4.22',key: this.getNum()},
                    {name: '教师教学目标和内容',num: '4.18',key: this.getNum()},
                    {name: '班级管理能力',num:'3.96',key: this.getNum()},
                    {name: '心理健康能力',num: '2.99',key: this.getNum()},
                    {name: '选题能力',num:'3.69',key: this.getNum()},
                    {name: '文献综述能力',num: '4.24',key: this.getNum()},
                    {name: '研究设计能力',num: '4.12',key: this.getNum()},
                    {name: '研究方法的运用能力',num: '3.49',key: this.getNum()},
                    {name: '资料收集与处理能力',num: '3.85',key: this.getNum()},
                    {name: '撰写和写作论文的能力',num: '3.37',key: this.getNum()},
                    {name: '成果应用能力',num: '4.69',key: this.getNum()},
                    {name: '创造性教学',num: '3.91',key: this.getNum()},
                ]
            }else if(this.value3 == '学生综合素质发展'){
                 this.tableData_1 = [
                    {name: '品德素养',num: '3.35',key: this.getNum()},
                    {name: '身心素养',num: '2.87',key: this.getNum()},
                    {name: '学业素养',num: '4.11',key: this.getNum()},
                    {name: '学习素养',num: '4.24',key: this.getNum()},
                    {name: '艺术素养',num: '3.69',key: this.getNum()},
                    {name: '实践创新素养',num: '3.99',key: this.getNum()}
                ]
                this.tableData_2 = [
                    {name: '行为习惯',num: '3.57',key: this.getNum()},
                    {name: '公民素养',num:'5.00',key: this.getNum()},
                    {name: '人格品质',num: '3.32',key: this.getNum()},
                    {name: '理想信念',num: '4.15',key: this.getNum()},
                    {name: '体质健康',num:'4.69',key: this.getNum()},
                    {name: '心理健康',num: '4.81',key: this.getNum()},
                    {name: '语文',num: '3.59',key: this.getNum()},
                    {name: '数学',num: '4.08',key: this.getNum()},
                    {name: '科学',num: '3.99',key: this.getNum()},
                    {name: '英语',num: '4.28',key: this.getNum()},
                    {name: '学习动机',num: '4.10',key: this.getNum()},
                    {name: '自我效能',num: '4.00',key: this.getNum()},
                    {name: '学习能力',num: '3.87',key: this.getNum()},
                    {name: '学业负担',num: '2.94',key: this.getNum()},
                    {name: '艺术知识掌握的客观',num: '3.63',key: this.getNum()},
                    {name: '艺术表现的主观评价',num: '4.09',key: this.getNum()},
                    {name: '创新特质',num: '4.71',key: this.getNum()},
                    {name: '创新实践',num: '4.36',key: this.getNum()},
                    {name: '创新成就',num: '5.00',key: this.getNum()},
                ]
            }else{
                this.tableData_1 = null;
                this.tableData_2 = null;
            }
        },
        getNum(){
            let a=Math.random()
            if(a<0.01){
                return (a/10*3+0.01).toFixed(2)
            }
            else{
                return (a/10*3).toFixed(2)
            }
        }
    }
}
</script>

<style lang='scss' scoped>
 @import "../../assets/scss/deep.scss";
.page-main{
    padding: 30px 40px;
}
.pdt20{
    padding-top: 20px;
}
.ofh{
    overflow: hidden;
}
.page-tit{
    font-size: 22px;
    font-weight: bold;
    color: #333;
}
.areaStatistics{
    padding-top: 20px;
    width: 100%;
}
.statisticsBox{
    width: 250px;
    height: 115px;
    border-radius: 5px;
    background: #FFF;
    float: left;
    margin-right: 25px;
    padding: 20px;
    .info{
        float: left;
        .tit{
            font-size: 16px;
            line-height: 1.6em;
            color: #747e93;
        }
        .num{
            font-size: 36px;
            font-weight: bold;
            color: #333333;
        }
    }
    .imgbox{
        float: right;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        overflow: hidden;
        margin: 11.5px 0;
    }
    .box-color-1{
        // background: #fff8e9;
        background:url(../../assets/img/dot-zs-1.png) #a5e4ce no-repeat center;
    }
    .box-color-2{
        // background: #eaf4ff;
        background:url(../../assets/img/dot-zs-2.png) #c8cefb no-repeat center;
    }
    
}
.l-genBox{
    float: left;
    width: 460px;
    height: 500px;
    margin-right: 24px;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.r-genBox{
    height: 500px;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.l-genBox,.r-genBox{
    .tit{
        width: 100%;
        padding: 20px 30px;
        font-size: 18px;
        color: #333333;
        font-weight: bold;
    }
}
.red{
    color: #ff7b12;
}

</style>